<template>
  <el-row :gutter="10">
    <el-col :span="7">类型</el-col>
    <el-col :span="17"></el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">识别码</el-col>
    <el-col :span="11">
      <el-input :value="geometry.uuid" disabled></el-input>
    </el-col>
    <el-col :span="4">
      <el-button @click="handleChangeUuid">更新</el-button>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">名称</el-col>
    <el-col :span="17">
      <el-input v-model="geometry.name"></el-input>
    </el-col>
  </el-row>
  <el-row :gutter="10" align="middle">
    <el-col :span="7">属性</el-col>
    <el-col :span="17">
      <el-row>
        <el-col :span="10">索引</el-col>
        <el-col :span="10">{{ geometry.index.count }}</el-col>
      </el-row>
      <el-row v-for="(attr, key) in geometry.attributes" :key="key">
        <el-col :span="10">{{ key }}</el-col>
        <el-col :span="10">{{ attr.count }}（{{ attr.itemSize }}）</el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row v-if="geometry.boundingBox" :gutter="10" align="middle">
    <el-col :span="7">界限</el-col>
    <el-col :span="17">
      <el-row>
        <el-col :span="10">x</el-col>
        <el-col :span="10">
          {{ Math.floor((geometry.boundingBox.max.x - geometry.boundingBox.min.x) * 1000) / 1000 }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">y</el-col>
        <el-col :span="10">
          {{ Math.floor((geometry.boundingBox.max.y - geometry.boundingBox.min.y) * 1000) / 1000 }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">z</el-col>
        <el-col :span="10">
          {{ Math.floor((geometry.boundingBox.max.z - geometry.boundingBox.min.z) * 1000) / 1000 }}
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">自定义数据</el-col>
    <el-col :span="17">
      <el-input v-model="userData" type="textarea"></el-input>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7"></el-col>
    <el-col :span="17">
      <el-button @click="handleVertexNormals">显示顶点法线</el-button>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { useActiveObject } from '@renderer/stores/activeObject'
import { useViewportStore } from '@renderer/stores/viewport'
import { storeToRefs } from 'pinia'
import { MathUtils, Mesh } from 'three'
import { VertexNormalsHelper } from 'three/examples/jsm/Addons.js'
import { computed, type Ref } from 'vue'

const activeObjectStore = useActiveObject()
const { activeVO }: { activeVO: Ref<Mesh> } = storeToRefs(activeObjectStore)

const geometry = computed({
  get: () => activeVO.value.geometry,
  set: (val) => {
    if (activeVO.value) {
      activeVO.value.geometry = val
    }
  }
})
function handleChangeUuid() {
  if (activeVO.value) {
    activeVO.value.uuid = MathUtils.generateUUID()
  }
}

const userData = computed({
  get: () => JSON.stringify(activeVO.value.geometry.userData),
  set: (val) => {
    if (activeVO.value) {
      activeVO.value.geometry.userData = JSON.parse(val)
    }
  }
})

const viewportStore = useViewportStore()
const { tresInstance } = storeToRefs(viewportStore)
// 显示/隐藏法线
function handleVertexNormals() {
  const scene = tresInstance.value?.scene.value
  const helper = scene?.children.find(
    (item) => item.name === `VertexNormalsHelper-${activeVO.value.uuid}`
  )

  if (helper) {
    helper.parent?.remove(helper)
  } else {
    const helper = new VertexNormalsHelper(activeVO.value)
    helper.name = `VertexNormalsHelper-${activeVO.value.uuid}`
    scene?.add(helper)
  }
}
</script>
<style lang="scss" scoped></style>
